<template>
	<div>
		<a-card>
			<div style="margin-bottom: 8px;" @click="onAdd">
				<a-button type="primary" icon="plus">
					添加字典类型
				</a-button>
			</div>
			<!-- 表格 -->
			<a-table :columns="columns" :row-key="record => record.adminId" :data-source="data" :pagination="pagination"
				:loading="loading" @change="handleTableChange">
				<template slot="action" slot-scope="text, record">
					<a-button-group>
						<a-button type="link" size="small" @click="onEdit(record)">编辑</a-button>
						<a-popconfirm title="确定删除?" @confirm="() => onDelete(record)">
							<a-button type="link" size="small">删除</a-button>
						</a-popconfirm>
					</a-button-group>
				</template>
			</a-table>
		</a-card>
		<!-- 添加 编辑弹层 -->
		<a-modal v-model="visible" :title="title" ok-text="确认" :destroyOnClose="true" cancel-text="取消" @ok="hideModal">
			<a-spin :spinning="spinning">
				<a-form-model :rules="rules" ref="ruleForm" :model="form" :label-col="labelCol"
					:wrapper-col="wrapperCol">
					<a-form-model-item label="账号" prop="name">
						<a-input v-model="form.name" placeholder="请输入" />
					</a-form-model-item>
					<a-form-model-item label="姓名/昵称" prop="realName">
						<a-input v-model="form.realName" placeholder="请输入" />
					</a-form-model-item>
					<a-form-model-item label="密码">
						<a-input v-model="form.password" type="password" placeholder="请输入" />
					</a-form-model-item>
					<a-form-model-item label="性别" prop="sex">
						<a-select v-model="form.sex" placeholder="请选择性别">
							<a-select-option value="">
								请选择
							</a-select-option>
							<a-select-option value="0">
								男
							</a-select-option>
							<a-select-option value="1">
								女
							</a-select-option>
						</a-select>
					</a-form-model-item>
					<a-form-model-item label="角色">
						<a-select mode="multiple" style="width: 100%"
							placeholder="请选择" @change="handleChange" :defaultValue="defaultValue">
							<a-select-option v-for="i in roles" :key="i.value" :value="i.value">
								{{ i.label }}
							</a-select-option>
						</a-select>
					</a-form-model-item>
				</a-form-model>
			</a-spin>
		</a-modal>
	</div>
</template>

<script>
	import {
		list,
		deleteOne,
		save,
		update
	} from '@/services/user/user';
	import {
		allRole,
	} from '@/services/role/role';
	const columns = [{
			title: '姓名',
			dataIndex: 'realName',
			key: "realName",
			align: 'center',
		},
		{
			title: '账号',
			dataIndex: 'name',
			key: "name",
			align: 'center',
		},
		{
			title: '性别',
			dataIndex: 'sex',
			customRender: function(text) {
				if (text == '0') {
					return "男";
				} else {
					return "女";
				}
			},
			key: "sex",
			align: 'center',
		},
		{
			title: '创建时间',
			dataIndex: 'createTime',
			key: "createTime",
			align: 'center',
		},
		{
			title: '更新时间',
			dataIndex: 'updateTime',
			key: "updateTime",
			align: 'center',
		},
		{
			title: '操作',
			dataIndex: 'operate',
			align: 'center',
			scopedSlots: {
				customRender: 'action'
			},
		},
	];
	export default {
		name: 'User',
		data() {
			return {
				value: 1,
				data: [],
				// 表格分页参数
				pagination: {
					showQuickJumper: true,
					showTotal: total => `共 ${total} 条数据`,
					showSizeChanger: true,
					pageSizeOptions: ['5', '10', '15', '20'],
					total: 0,
				},
				loading: false,
				columns,
				page: 1,
				size: 10,
				total: 0,
				visible: false,
				title: "添加",
				// 表单
				form: {
					adminId: '',
					realName: '',
					sex: '',
					name: '',
					password: '',
					roleIds: ''
				},
				labelCol: {
					span: 4
				},
				wrapperCol: {
					span: 14
				},
				// 
				spinning: false,
				// 表单验证规则
				rules: {
					name: [{
						required: true,
						message: '请输入账号',
						trigger: 'blur'
					}],
					realName: [{
						required: true,
						message: '请输入姓名/昵称',
						trigger: 'blur'
					}],
					// password: [{
					//   required: true,
					//   message: '请输入密码',
					//   trigger: 'blur'
					// }],
					sex: [{
						required: true,
						message: '请选择性别',
						trigger: 'blur'
					}],
				},
				// 所有角色
				roles:[],
				roleIds:"",
				defaultValue:[]
			}
		},
		computed: {
			// desc() {
			// 	return this.$t('pageDesc')
			// }
			// this.getAllRole();
		},
		methods: {
			handleChange(value) {
				console.log(value);
				console.log(value.toString());
				this.form.roleIds = value.toString()
			},
			// 获取所有角色
			getAllRole() {
				allRole().then(result => {
					let res = result.data;
					for (var i = 0; i < res.data.length; i++) {
						let obj = {
							label: res.data[i].roleName,
							value: res.data[i].roleId,
						};
						this.roles.push(obj);
					}
				})
			},
			// 获取列表数据
			getData() {
				this.loading = true
				this.pagination.current = this.page;
				this.pagination.pageSize = this.size;
				const param = {
					page: this.page,
					limit: this.size
				}
				list(param).then(res => {
					let data = res.data
					console.log(data)
					this.data = data.data
					this.total = data.count;
					this.pagination.total = data.count;
					this.loading = false
				})
			},
			showSizeChange(current, size) {
				console.log(current);
				console.log(size);
			},
			// 表格
			handleTableChange(pagination) {
				console.log(pagination);
				this.size = pagination.pageSize;
				this.page = pagination.current;
				this.getData()
			},
			// 删除
			onDelete(record) {
				console.log(record)
				console.log(record.adminId)
				deleteOne(record.adminId).then(result => {
					let res = result.data;
					if (res.code == 0) {
						this.$message.success(res.msg);
						this.getData();
					} else {
						this.$message.error(res.msg);
					}
				})
			},
			// 编辑
			onEdit(record) {
				console.log(record)
				this.visible = true;
				// 要先显示再reset
				this.title = "编辑"
				this.form.adminId = record.adminId
				this.form.name = record.name
				this.form.sex = record.sex
				this.form.realName = record.realName
				this.form.password = ''
				this.defaultValue = record.roleList
				this.form.roleIds = record.roleList.toString()
			},
			onAdd() {
				this.title = "添加"
				this.visible = true;
				this.defaultValue = []
				this.$nextTick(() => {
					this.$refs.ruleForm.resetFields();
					this.form = {};
				});
			},
			// 确认弹框
			hideModal() {
				this.$refs.ruleForm.validate(valid => {
					if (valid) {
						this.spinning = true
						// 提交成功后关闭动画
						if (this.title == "添加") {
							save(this.form).then(result => {
								let res = result.data;
								this.spinning = true
								if (res.code == 0) {
									this.$message.success(res.msg);
									this.spinning = false;
									this.visible = false;
									this.getData()
								} else {
									this.$message.error(res.msg);
									this.spinning = false;
									this.from.name = "";
									this.from.password = "";
								}
							})
						} else {
							update(this.form).then(result => {
								let res = result.data;
								this.spinning = true
								if (res.code == 0) {
									this.$message.success(res.msg);
									this.spinning = false;
									this.visible = false;
									this.getData()
								} else {
									this.$message.error(res.msg);
									this.spinning = false;
									this.from.name = "";
									this.from.password = "";
								}
							})
						}
					} else {
						return false;
					}
				});
			}
		},
		mounted() {
			this.getData();
			this.getAllRole();
		}
	}
</script>

<style>
</style>
